<!--
 * @Description: 
 * @Author: 赵华�??
 * @Date: 2024-11-14 11:17:17
 * @LastEditors: 赵华宇
 * @LastEditTime: 2024-11-15 21:56:53
-->
<template>
  <h1 style="text-align: center;">学生成绩表</h1>
    <el-table :data="tableData1" border style="width:100%">
      <el-table-column prop="number" label="学号" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="grade" label="分数" width="180" />
      <el-table-column prop="remark" label="评语"  />
      <el-table-column fixed="right" label="Operations" min-width="50">
        <template #default="scope">
          <!-- 添加删除按钮 -->
           <el-button link type="danger" size="small" @click="handleDe(scope.row)">Delete</el-button>
           <el-button link type="primary" size="small" @click="handleEd(scope.row)">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogFormVisible" title="编辑学生信息" >
    <el-form :model="form">
      <el-form-item  label="学号" >
        <el-input v-model="form.number" disabled autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名" >
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="分数" >
        <el-input v-model="form.grade" autocomplete="off" />
      </el-form-item>
      <el-form-item label="评语" >
        <el-input v-model="form.remark" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="editedData">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from 'vue';

const tableData1 = ref([
  {
    number: '001',
    name: '张三',
    grade: 90,
    remark: '优秀',
  },
  {
    number: '002',
    name: '李四',
    grade: 92,
    remark: '很优秀',
  },
  {
    number: '003',
    name: '王五',
    grade: 83,
    remark: '很努力，不错',
  },
  {
    number: '004',
    name: '赵六',
    grade: 98,
    remark: '666',
  }
]);
const handleDe=(row)=>{
  const index = tableData1.value.indexOf(row);
  if (index!== -1) {
    tableData1.value.splice(index, 1);
}
}
const dialogFormVisible = ref(false)
const form= ref({
  number: '',
  name: '',
  grade: '',
  remark: '',
});
//要编辑的行数
let editRowData;
const handleEd = (row) => {
  // 显示编辑对话框
  editRowData={...row };
  dialogFormVisible.value = true;
  // 将当前行数据复制到编辑表单数据中，以便在对话框中进行编辑
  form.value = {...row };
  // form.value.id = row.id; // 新增这一行，复制id字段
};
const editedData = () => {
  const index = tableData1.value.findIndex((item) => item.number === editRowData.number);
    if (index === -1) {
      // 显示提示信息
      alert('找不到要修改的数据?');
      return;
    }
    tableData1.value.splice(index, 1, {
      number: form.value.number,
      name: form.value.name,
      grade: form.value.grade,
      remark: form.value.remark,
    });
    dialogFormVisible.value = false;
    // 显示提示信息
    alert('修改成功');
  };
</script>
<style scoped>
</style>